<template>
  <div>
    <navBar title="电芯拆解管理系统" />

    <div class="pageMain">
      <!-- 步骤进度 -->
      <div class="arrowsBox">
        <div class="arrowsItem" v-for="(item, index) in stepList" :key="index">
        <div
          class="arrows-up arrows"
          :class="{
            arrows_active: item.id === currentTaskNodeInstId,
            arrows_done: item.isalready === true && currentTaskNodeInstId !== item.id,
            arrows_todo: !item.isalready && item.id !== currentTaskNodeInstId
          }"
          @click="tabClick(index,item)"
        ></div>
        <div
          class="arrows-down arrows"
          :class="{
            arrows_active: item.id === currentTaskNodeInstId,
            arrows_done: item.isalready === true && currentTaskNodeInstId !== item.id,
            arrows_todo: !item.isalready && item.id !== currentTaskNodeInstId
          }"
          @click="tabClick(index,item)"
        ></div>
        <div
          class="arrows-label"
          :class="{
            arrows_label_active: item.id === currentTaskNodeInstId,
            arrows_label_done: item.isalready === true && currentTaskNodeInstId !== item.id,
            arrows_label_todo: !item.isalready && item.id !== currentTaskNodeInstId
          }"
          @click="tabClick(index,item)"
        >
        {{item.taskNodeName}}
        </div>
      </div>
   </div>

      <van-overlay :show="loading">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-loading size="24px" vertical v-if="loading">加载中...</van-loading>
          </div>
        </div>
      </van-overlay>
      
      <!-- 表格信息 -->
      <div class="content">
        <div class="formBox">
          <div v-for="(item, index) in stepList ">
            <Form1 ref="form1" v-if="currentTaskNodeInstId === item.id && item.sortNo === 1" 
                              :formDataProp="formData['form1']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName"
                              :sortNoProp="item.sortNo" />

            <Form2 ref="form2" v-if="currentTaskNodeInstId === item.id && item.sortNo === 2" 
                              :formDataProp="formData['form2']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName" 
                              :sortNoProp="item.sortNo" />

            <Form3 ref="form3" v-if="currentTaskNodeInstId == item.id && item.sortNo == 3" 
                              :formDataProp="formData['form3']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName" 
                              :sortNoProp="item.sortNo" />

            <Form4 ref="form4" v-if="currentTaskNodeInstId == item.id && item.sortNo == 4" 
                              :formDataProp="formData['form4']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName" 
                              :sortNoProp="item.sortNo" />
          
            <Form5 ref="form5" v-if="currentTaskNodeInstId == item.id && item.sortNo == 5" 
                              :formDataProp="formData['form5']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName" 
                              :sortNoProp="item.sortNo" />

            <Form6 ref="form6" v-if="currentTaskNodeInstId == item.id && item.sortNo == 6" 
                              :formDataProp="formData['form6']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName" 
                              :sortNoProp="item.sortNo" />

            <Form7 ref="form7" v-if="currentTaskNodeInstId == item.id && item.sortNo == 7" 
                              :formDataProp="formData['form7']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName" 
                              :sortNoProp="item.sortNo" />

            <Form8 ref="form8" v-if="currentTaskNodeInstId == item.id && item.sortNo == 8" 
                              :formDataProp="formData['form8']" 
                              :mainTaskInfoProp="maintaskInfo" 
                              :subTaskInfoProp="subtaskInfo"  
                              :taskNodeNameProp="item.taskNodeName" 
                              :sortNoProp="item.sortNo" />
          </div>
          <!-- 按钮 -->
          <div class="footer" v-if="this.subtaskInfo.status !=3 ">
            <van-button class="btnCss"
                        round
                        block
                        type="primary"
                        @click="prevHandle"
                        :disabled="prevHandleDisabled">上一步</van-button>
            <van-button class="btnCss"
                        round
                        block
                        type="primary"
                        @click="nextHandle"
                        :disabled="nextHandleDisabled">下一步</van-button>
            <van-button class="btnCss"
                        round
                        block
                        type="primary"
                        @click="skipHandle"
                        :disabled="skipHandleDisabled">跳过</van-button>
            <van-button class="btnCss"
                        round
                        block
                        type="primary"
                        @click="hangHandle"
                        :disabled="hangHandleDisabled">挂起</van-button>
            <van-button class="btnCss"
                        round
                        block
                        type="primary"
                        v-if="stepList.length > 0"
                        @click="onSubmit"
                        :disabled="hangHandleDisabled">归档</van-button>
          </div>
        </div>

      </div>
    </div>
    <!-- 弹窗 -->
    <van-popup v-model:show="showPicker"
               position="bottom">
      <van-picker show-toolbar
                  title="缺陷类型"
                  :columns="columns"
                  @confirm="onConfirm"
                  @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from 'vant';
import navBar from '../../components/navBar/index.vue'
import Form1 from './form/form1.vue'
import Form2 from './form/form2.vue'
import Form3 from './form/form3.vue'
import Form4 from './form/form4.vue'
import Form5 from './form/form5.vue'
import Form6 from './form/form6.vue'
import Form7 from './form/form7.vue'
import Form8 from './form/form8.vue'
import { getDefectTypeByTaskNode } from '@/apis/index';

import { 
  subtaskExecute, 
  getAllDefectType, 
  nextSave, 
  getCurrentNodeInfo, 
  finishTask,
  preData,
  getSubTaskInfo,
  hangSubTaskNode,
  skipSubTaskNode
} from "@/apis/index";

export default {
  name: "Home",
  data () {
    return {
        maintaskInfo:{},
        subtaskInfo:{},
        stepList:[],
        currentId:null,
        formData:{},
        remark:'',
        columns:[],
        showPicker:false,
        currentTaskNodeInstId: null,
        electricCoreWeight:'',      //电芯重量
        measureVoltage:'',          //测量电压
        totalWeight:'',             //总重量
        thickness:'',               //合芯厚度
        positivePoleBottom:'',      //正极柱下侧
        explosionTrapBottom:'' ,    //防爆阀下侧
        negativePoleBottom:'',      //负极柱下侧
        barcode:'',                 //极组条码
        currentFormId:null,
        loading: false
    };
  },
  components: { navBar , Form1, Form2, Form3, Form4, Form5, Form6, Form7, Form8 },
  created () {
    this.$nextTick(() => {
      if (this.$route.params.subTaskInfo) {
        this.subtaskInfo = JSON.parse(this.$route.params.subTaskInfo);
      } else {
        //获取子任务详情数据
        this.loading = true;
        getSubTaskInfo(this.$route.query.subtaskId).then(res=>{
            if(res.code === 1) {
              this.subtaskInfo = res.data;
              this.currentTaskNodeInstId = this.subtaskInfo.currentTaskNodeInstId

              if (this.$route.params.mainTaskInfo) {
                this.maintaskInfo = JSON.parse(this.$route.params.mainTaskInfo);
              } else if (sessionStorage.getItem('mainTaskInfo')) {
                this.maintaskInfo = JSON.parse(sessionStorage.getItem('mainTaskInfo'));
              }
              this.getDataList();
            }
        })
      }
    });
  },
  computed: {
    prevHandleDisabled() {
      return !this.stepList || this.stepList.length === 0 || this.stepList[0].id === this.currentTaskNodeInstId
    },
    nextHandleDisabled() {
      return !this.stepList || this.stepList.length === 0 || this.stepList[this.stepList.length - 1].id === this.currentTaskNodeInstId
    },
    skipHandleDisabled() {
      return !this.stepList || this.stepList.length === 0 || this.stepList[this.stepList.length - 1].id === this.currentTaskNodeInstId
    },
    hangHandleDisabled() {
      return !this.stepList || this.stepList.length === 0 || !this.currentTaskNodeInstId
    }
  },
  mounted () {
    
   },
  methods: {
    getDataList(){ 
        let param = {
          taskId:this.$route.query.taskId,
          subtaskId:this.$route.query.subtaskId,
        }
        subtaskExecute(param).then(res=>{
            if (res.code === 1) {
              //判断当前最终的状态为空，默认第一个步骤
              this.stepList = res.data
              if (!this.stepList && this.stepList.length <= 0) {
                Toast('获取节点步骤失败')
                return
              }

              // 设置当前节点实例ID
              if(!this.subtaskInfo.currentTaskNodeInstId) {
                this.currentTaskNodeInstId = this.stepList[0].id;
              } else {
                this.currentTaskNodeInstId = this.subtaskInfo.currentTaskNodeInstId;
              }
              
              this.stepList.forEach((item,index)=>{
                this.resetFormData(item.sortNo)
                if(item.action) {
                  item.isalready = true
                }
              })
              
              // 初始化获取表单数据
              this.currentTaskNodeInfoData();
              // if(this.subtaskInfo.status !== '0') {
              //   this.currentTaskNodeInfoData();
              // } else {
              //   this.loading = false
              // }

            } else  {
              this.loading = false
            }
        }).catch(e=>{
          
        })
    },
    currentTaskNodeInfoData() {
        //判断当前数据
          let param = {
            taskNodeInstId: this.currentTaskNodeInstId,
            subtaskId: this.$route.query.subtaskId,
          }
          getCurrentNodeInfo(param).then(res=>{
              if(res.code === 1) {
                this.currentId = res.data.id
                let currentStepIndex = this.findCurrentStepIndex()
                if (currentStepIndex === -1) {
                  Toast('获取当前节点数据失败')
                  return
                }
                this.setCurrentFormData(res);
              }else{
                this.resetFormData(ind)
              }
              this.loading = false
          })
       
    },
    tabClick(i,item) {
      if (this.subtaskInfo.status === '3') {
        this.currentTaskNodeInstId = item.id;
        //获取节点数据
        this.currentTaskNodeInfoData();
      }
    },
    clickPicker(){
      this.showPicker = true;
    },
    onConfirm(value){
      this.picker = value.text;
      this.showPicker = false;
    },
    prevHandle() {
      if (this.stepList[0].id === this.currentTaskNodeInstId) {
        Toast('已经是第一步')
        return
      }
      let param = {
        taskNodeInstId:this.currentTaskNodeInstId,
        subtaskId:this.$route.query.subtaskId,
      }
      this.loading = true
      preData(param).then(res=>{
          if(res.code === 1 ) { 
              this.currentId = res.data.id;
              this.currentTaskNodeInstId = res.data.taskNodeInstId;
              this.setCurrentFormData(res);
          }
          this.loading = false
      })
      
    },
    getFormData(formNo) {
      let param = {
          subTaskId: this.$route.query.subtaskId,
          taskNodeInstId: this.currentTaskNodeInstId,
          electricCoreCode:this.subtaskInfo.electricCoreCode,
          electricCoreType:this.subtaskInfo.electricCoreType
      }
      if(this.currentId){
          param.id = this.currentId;
      }
      switch(formNo) {
          case 1 : 
            return this.$refs.form1[0].getFormData(param);
          case 2 : 
            return this.$refs.form2[0].getFormData(param);
          case 3 : 
            return this.$refs.form3[0].getFormData(param);
          case 4 : 
            return this.$refs.form4[0].getFormData(param);
          case 5 : 
            return this.$refs.form5[0].getFormData(param);
          case 6 : 
            return this.$refs.form6[0].getFormData(param);
          case 7 : 
            return this.$refs.form7[0].getFormData(param);
          case 8 : 
            return this.$refs.form8[0].getFormData(param);
      }
    },
    nextHandle(flag=true){
      //跳转到下一步前，保存当前数据成功过后跳转下一步
      let currentStepIndex = this.findCurrentStepIndex()
      if (currentStepIndex === -1) {
        Toast('下一步节点未找到')
        return
      } else {
        switch(this.stepList[currentStepIndex].sortNo) {
          case 1 : 
            let formData = this.getFormData(currentStepIndex + 1);
            if (!formData.electricCoreCode) {
              Toast('条码不能为空');
              return false;
            }
            if (!formData.electricCoreType) {
              Toast('电芯型号不能为空');
              return false;
            }
            this.subtaskInfo.electricCoreCode = formData.electricCoreCode;
            this.subtaskInfo.electricCoreType = formData.electricCoreType;
            this.saveData(formData,flag);
            break;
          case 2 : 
            this.saveData(this.getFormData(currentStepIndex + 1),flag);
            break;
          case 3 : 
            this.saveData(this.getFormData(currentStepIndex + 1),flag);
            break;
          case 4 : 
            this.saveData(this.getFormData(currentStepIndex + 1),flag);
            break;
          case 5 : 
            this.saveData(this.getFormData(currentStepIndex + 1),flag);
            break;
          case 6 : 
            this.saveData(this.getFormData(currentStepIndex + 1),flag);
            break;
          case 7 : 
            this.saveData(this.getFormData(currentStepIndex + 1),flag);
            break;
          case 8 : 
            this.saveData(this.getFormData(currentStepIndex + 1),flag);
            break;
        }
      }
    },
    saveData(newParam,flag){
      if (flag) {
        this.loading = true
        nextSave(newParam).then(res=>{
          if(res.code === 1) {
            let currentStepIndex = this.findCurrentStepIndex()
            if (currentStepIndex !== -1) {
              this.stepList[currentStepIndex].isalready = true;
              // 第一个环节保存后再查询一次子任务数据
              if (currentStepIndex === 0) {
                getSubTaskInfo(this.$route.query.subtaskId).then(res => {
                  if(res.code === 1) {
                    this.subtaskInfo = res.data;
                    this.currentTaskNodeInstId = this.subtaskInfo.currentTaskNodeInstId
                  }
                })
              }
              //获取下个节点数据
              this.currentId = res.data.id;
              this.currentTaskNodeInstId = res.data.taskNodeInstId;
              this.setCurrentFormData(res);
            }
            this.loading = false
          }else{
            this.loading = false
            Toast(res.msg);
          }
        }).catch(e=>{

        })
      } else {
        this.loading = true
        hangSubTaskNode(newParam).then(res => {
          if (res.code === 1) {
            //获取当前节点数据
            this.currentTaskNodeInfoData();
            Toast('挂起成功');
          } else {
            this.loading = false
          }
        })
      }
    },
    skipHandle() { 
      //获取下个节点数据
      let param = {
        taskNodeInstId: this.currentTaskNodeInstId,
        subtaskId: this.$route.query.subtaskId,
      }
      if (!this.subtaskInfo.electricCoreCode) {
        Toast('电芯编号不能为空');
        return false;
      }
      if (!this.subtaskInfo.electricCoreType) {
        Toast('电芯型号不能为空');
        return false;
      }
      this.loading = true
      skipSubTaskNode(param).then(res => {
        if(res.code === 1) {
            let currentStepIndex = this.findCurrentStepIndex()
            if (currentStepIndex === -1) {
              this.loading = false
              Toast('找不到下一个节点')
              return
            }

            this.stepList[currentStepIndex].isalready = true
            this.currentId = res.data.id; 
            this.currentTaskNodeInstId = res.data.taskNodeInstId;
            this.setCurrentFormData(res);
            this.loading = false
          }else{
            this.loading = false
            Toast('获取数据失败')
          }
        })
    },
    hangHandle(){
        //挂起就是保存数据，不跳下一步
        this.nextHandle(false)
    },
    async setCurrentFormData(res) {
      let currentStepIndex = this.findCurrentStepIndex();
      if (currentStepIndex === -1) {
        Toast("获取最新步骤失败")
      } else {
        let currentDefectTypeList = await this.getCurrentTaskNodeDefectTypes(this.stepList[currentStepIndex].taskNodeId);
        this.formData['form'+ (currentStepIndex + 1)] = {
          taskNodeId: this.stepList[currentStepIndex].taskNodeId,
          taskNodeInstId: res.data.taskNodeInstId,
          subTaskNodeInstId: res.data.id,
          defectTypeList: res.data.defectTypeList,
          currentNodeDefectTypeList: currentDefectTypeList,
          fileList:res.data.taskNodeFileList,
          remark:res.data.remark,
          electricCoreCode: this.subtaskInfo.electricCoreCode,
          electricCoreType: this.subtaskInfo.electricCoreType,
          electricCoreTypeName: this.subtaskInfo.electricCoreTypeName,
          cellTypeCode: res.data.cellTypeCode,
          cellTypeName: res.data.cellTypeName,
          factoryCode: res.data.factoryCode,
          factoryName: res.data.factoryName,
          nodeInstConfigValueList: res.data.nodeInstConfigValueList
        };
      }
    },
    async onSubmit() {
      //归档前先保存当前数据
      let currentStepIndex = this.findCurrentStepIndex()
      if(currentStepIndex === -1) {
        Toast('未找到当前节点')
        return
      }
      let formData = this.getFormData(currentStepIndex + 1);
      formData.action = 'NORMAL';
      this.loading = true
      const res = await hangSubTaskNode(formData);
      if (res.code === 1) {
        let _this = this;
        setTimeout(function() {
          let param = {
            subTaskId: _this.$route.query.subtaskId,
            taskNodeInstId: _this.currentTaskNodeInstId
          }
          finishTask(param).then(res=>{
              _this.loading = false
              if(res.code == 1){
                Toast('数据归档成功');
              }else{
                Toast(res.msg);
              }
              _this.$router.push({
                name: 'taskDetail',
                params: {
                  ..._this.maintaskInfo
                },
                query: {
                  mainTaskId: _this.$route.query.taskId,
                },
              });
          })
        },1000)
      } else {
        this.loading = false
      }
    },
    // 查找当前节点的缺陷列表
    async getCurrentTaskNodeDefectTypes(taskNodeId) {
      let res = await getDefectTypeByTaskNode({taskNodeId: taskNodeId});      
      if (res.code === 1)
        return res.data;
      else
        return [];
    },
    // 查找当前步骤所在的数组位置
    findCurrentStepIndex() {
        let index = this.stepList.findIndex((item) => {
          return this.currentTaskNodeInstId === item.id
        })
        return index
    },
    resetFormData(formNo) {
      this.formData['form' + formNo] = {
        defectTypeIdList: []
      }
    }
  }
};
</script>

<style lang="scss">

.van-cell:after {
  border: 0;
}
.van-cell__value {
  border: #e2e0e0 1px solid;
  border-radius: 2px;
  padding: 5px 10px;
}

.pickerCss {
  // font: 14px/1 vant-icon;
  .van-cell__value {
    background: url("../../assets/images/downIcon.png") no-repeat center right
      10px;
    background-size: 16px 14px;
  }
}
</style>

<style lang="scss" scoped>

::v-deep .van-cell__value {
  position: relative;
  overflow: hidden;
  color: var(--van-cell-value-color);
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
  bottom: 2px;
}

::v-deep .van-field__label {
  flex: none;
  box-sizing: border-box;
  width: auto;
  margin-right: var(--van-field-label-margin-right);
  color: #646566;
  text-align: left;
  word-wrap: break-word;
}
::v-deep .van-cell__right-icon {
    height: var(--van-cell-line-height);
    font-size: var(--van-cell-icon-size);
    line-height: 34px;
}
.stepList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 0 60px;

  .step {
    // float: left;
    width: 20%;
    position: relative;
    border-bottom: 1px solid #1989fa;
    margin-bottom: 10px;

    .stepBox {
      position: relative;
      bottom: -13px;
      height: 100%;
      text-align: left;
      display: flex;
      align-items: end;
      // justify-content: space-evenly;

      .name {
        font-size: 11px;
        height: 35px;
        // width: 140px;
        padding-right: 5px;
        // line-height: 30px;
      }

      .text {
        font-size: 14px;
        color: #888888;
        margin-bottom: 10px;
      }

      .divIcon {
        display: inline-block;
        width: 26px;
        height: 26px;
        line-height: 26px;
        color: #ffffff;
        background-color: #999999;
        border-radius: 50%;
        text-align: center;
      }
    }
    .onStepBox {
      .name {
        // font-size: 17px;
        // color: #07ba15;
        position: relative;
        color: #07ba15;
        font-weight: 600;
        
      }
      .text {
        position: relative;
        top: -2px;
        // font-size: 15px;
        // color: rgba($color: #07ba15, $alpha: 0.8);
      }
      .divIcon {
        background-color: #07ba15;
        box-shadow: 0 0 10px 2px #07ba15;
      }
    }
    .isAlreadyBox{
      .name {
        // font-size: 17px;
        // color: #07ba15;
        position: relative;
        color: #1989fa;
        font-weight: 600;
        
      }
      .text {
        position: relative;
        top: -2px;
        // font-size: 15px;
        // color: rgba($color: #07ba15, $alpha: 0.8);
      }
      .divIcon {
        background-color: #1989fa;
        box-shadow: 0 0 10px 2px #1989fa;
      }
    }
  }

  .huL {
    position: absolute;
    left: -60px;
    bottom: -1px;
    width: 60px;
    height: 100%;
    padding-bottom: 10px;
    border: 1px solid #1989fa;
    border-radius: 100% 0 0 100%/50%;
    border-right: none;
  }
  .huR {
    position: absolute;
    right: -60px;
    bottom: -1px;
    width: 60px;
    height: 100%;
    padding-bottom: 10px;
    border: 1px solid #1989fa;
    border-radius: 0 100% 100% 0/50%;
    border-left: none;
  }
}

.stepFlow {
  display: block;
  height: auto;
  min-height:135px;

  .step {
    float: left;
  }

  .stepFR {
    float: right;
  }
}

.content {
  // background-color: #888888;
  .formBox {
    border: #e2e0e0 1px solid;
    padding: 20px;
    border-radius: 4px;
  }
}
.rowLabel {
  color: #646566;
  .colCss {
    padding: 10px 16px;
  }
}

.footer {
  text-align: center;
  margin-top: 20px;
}
.btnCss {
  display: inline-block;
  width: 120px;
  margin: 0 10px;
}
.rowLabel{
  .taskName{
    display: inline-block;
    width: 6.2em;
  }
  .taskInfo{
    display: inline-block;
    margin-left:12px;
  }
}
.defectSelect{
  .van-cell__value,.van-field__value{
    border: none!important;
    padding: 0px!important;
  }
}
.formUnit{
  line-height:56px;
}
// .stepList .step:last-child{
//   border-bottom: none!important;
// }
.imgTskInfo{
  margin-left:20px!important;
}
.imgType{
  width:80px;
  display: inline-block;
  margin-left:8px;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
}

.van-loading__text {
  display: inline-block;
  color: #f2f3f5;
  font-size: var(--van-loading-text-font-size);
  vertical-align: middle;
}

.van-loading {
  position: relative;
  color: #f2f3f5 !important;
  font-size: 0;
  vertical-align: middle;
}

.arrowsBox {
  display: flex;
  justify-content: center;
  height: 40px;
  margin: 20px;
  font-weight: bold;
}
.arrowsItem {
  position: relative;
  height: 100%;
  width: 140px;
  margin-right: 10px;
}
.arrows-up {
  transform: skewX(30deg);
}
.arrows-down {
  transform: skewX(-30deg);
}
.arrows {
  height: 50%;

  background: gray;
}

.arrows-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.arrows_done {
  background: #edf9ff;
}
.arrows_active {
  background: #009fe9;
}
.arrows_todo {
  background: #ebedf0;
}

.arrows_label_done {
  color: #009fe9;
}
.arrows_label_active {
  color: #fff;
}
.arrows_label_todo {
  color: #929393;
}
.btn {
  background: #009fe9;
  color: #fff;
  border: none;
  padding: 6px;
  width: 100px;
  border-radius: 4px;
  margin: auto;
  display: block;
}
</style>